<template>
	<view class="search">
		<u-form :model="form" ref="uForm" label-width="120px">
			<u-form-item label="产品名称"><u-input v-model="form.productName" placeholder="请输入产品名称" /></u-form-item>
			<u-form-item label="产品英文名称"><u-input v-model="form.productNameEn" placeholder="请输入产品英文名称" /></u-form-item>
			<u-form-item label="产品编号"><u-input v-model="form.productNum" placeholder="请输入产品编号" /></u-form-item>
			<u-form-item label="产品规格"><u-input v-model="form.productSpecName" placeholder="请输入产品规格" /></u-form-item>
			<u-form-item label="仓库名称"><u-input v-model="form.storehouseName" placeholder="请输入仓库名称" /></u-form-item>
		</u-form>
		<view class="btn">
			<u-button shape="circle" size="medium" type="info" @click="cancel">取消</u-button>
			<u-button shape="circle" size="medium" type="primary" @click="confirm">查询</u-button>
		</view>
	</view>
</template>

<script>
import Vue from 'vue';
export default {
	props: {
		// 查询条件数据
		condition: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data: () => ({
		form: {
			// 产品名称
			productName: '',
			// 产品英文名称
			productNameEn: '',
			// 产品编号
			productNum: '',
			// 产品规格
			productSpecName: '',
			// 应该是状态，pc代码写了，但是页面没有显示元素，先留着怕以后再加上
			productStatus: '',
			// 仓库名称
			storehouseName: '',
		},
	}),
	methods: {
		// 因为popup隐藏后，form表单里面的数据丢失了，所以打开的时候，再传回来
		initForm() {
			this.form = { ...this.condition };
		},
		// 取消
		cancel() {
			this.$emit('oncancel');
			this.$refs.uForm.resetFields();
		},
		// 查询
		confirm() {
			this.$emit('onconfirm', this.form);
		},
	},
	computed: {},
	watch: {},

	// 组件周期函数--监听组件挂载完毕
	mounted() {
		this.initForm();
	},
	// 组件周期函数--监听组件数据更新之前
	beforeUpdate() {},
	// 组件周期函数--监听组件数据更新之后
	updated() {},
	// 组件周期函数--监听组件激活(显示)
	activated() {},
	// 组件周期函数--监听组件停用(隐藏)
	deactivated() {},
	// 组件周期函数--监听组件销毁之前
	beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.u-form .u-form-item {
	padding: 9px 15px;
}
.btn {
	padding: 15px;
	text-align: center;
	.u-btn {
		margin: 0 10px;
	}
}
</style>
